<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<style type="text/css">
			#app{
				width: 80%;
				border: solid 1px gray;
				margin: 0 auto;
				padding: 20px;
			}
		        @keyframes bounce-in {
		            0% {
		                transform: scale(0);
		            }
		            50% {
		                transform: scale(1.5);
		            }
		            100% {
		                transform: scale(1);
		            }
		        }
		        .fade-enter-active {
		            transform-origin: left center;
		            animation: bounce-in 1s;
		        }
		        .fade-leave-active {
		            transform-origin: left center;
		            animation: bounce-in 1s reverse;
		        }
		</style>
	</head>
	<body>

<div id="app">
	<button @click="handleClick">切换</button>
<transition name="fade">
<div v-show="show">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</div>
</transition>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        });
</script>

	</body>
</html>
